<template>
  <!--  头部部分  -->
  <div class="home_head">
    <router-link to="/home/index" v-slot="{ href, route, navigate}"
                 custom>
      <a :href="href" @click="navigate">
        <img src="https://bucket-yufei.oss-cn-beijing.aliyuncs.com/my_self/image/zongLogo.png"/>
      </a>

    </router-link>

    <ul class="head_nav">
      <router-link
          to="/home/index"
          v-slot="{ href, route, navigate, isActive, isExactActive }"
          custom
      >
        <li
            :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
        >
          <a :href="href" @click="navigate">首页</a>
        </li>
      </router-link>
      <router-link
          to="/home/bestseller"
          v-slot="{ href, route, navigate, isActive, isExactActive }"
          custom
      >
        <li
            :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
        >
          <a :href="href" @click="navigate">畅销图书</a>
        </li>
      </router-link>
      <router-link
          to="/home/contactservice"
          v-slot="{ href, route, navigate, isActive, isExactActive }"
          custom
      >
        <li
            :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
        >
          <a :href="href" @click="navigate">联系客服</a>
        </li>
      </router-link>
      <router-link
          to="/home/opinion"
          v-slot="{ href, route, navigate, isActive, isExactActive }"
          custom
      >
        <li
            :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
        >
          <a :href="href" @click="navigate">意见反馈</a>
        </li>
      </router-link>
      <router-link
          to="/personal"
          v-slot="{ href, route, navigate, isActive, isExactActive }"
          custom
      >
        <li
            :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
        >
          <a :href="href" @click="navigate">个人主页</a>
        </li>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HomeHead"
}
</script>

<style scoped>
.home_head{
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  z-index: 10;
}
.home_head img{
  width: 290px;
  height: 100%;
}
.head_nav{
  display: flex;
  font-size: 20px;
  text-align: center;
}
.head_nav li{
  line-height: 58px;
  width: 100px;
  cursor: pointer;
  border-top: 2px solid transparent;
  transition: all 300ms;
}
.head_nav li a{
  display: block;
  color: #000000;
  text-decoration: none;
}
.head_nav li:hover{
  background: white;
  border-top: 2px solid red;
}
.router-link-active{
  border-bottom: 2px solid red;
}
</style>
